<template>
    <el-dialog :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false" @close="handleClose">
        <span slot="title" style='color: rgba(0,0,0,.85);font-weight: 500;font-size: 14px;'>编辑打印模版</span>
        <div style="margin-bottom: 10px;">
            可通过下载系统模版
            <el-button type="text" size="mini" v-for="(i,index) in tableData.slice(0,3)" :key='i.id'
                @click="downloadTemplateFn({id:i.id},i.templateName)">
                {{i.templateName}}
            </el-button>
            <br />
            根据业务需要编辑、上传新的模版。
        </div>
        <el-table :data="tableData" border style="width: 100%" max-height="180"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading">
            <el-table-column label="模版">
                <template slot-scope="scope">
                    <div class='tableData'>
                        <div class='l_mould'>
                            <span>{{scope.row.templateName}}</span>
                            <span v-show='!scope.row.templateType'>系统模版</span>
                        </div>
                        <div class='r_mould'>
                            <el-button type="text" size="mini" @click="deleteTemplateFn(scope.row.id)"
                                v-show='scope.row.templateType'>删除</el-button>
                            <el-button type="text" size="mini"
                                @click="downloadTemplateFn({id:scope.row.id},scope.row.templateName)">下载</el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top:20px">
            <el-upload :action="$global.uploadUrl+'/sys/printTemplate/uploadTemplate'" :file-list='fileList'
                :headers='computedToken' :data='{belongModule}' :show-file-list='false' :on-success='handleSuccess'
                :on-error="handleError" accept='.xlsx,.xls' :disabled="isDisabled">
                <el-button size="mini" type="primary" icon='el-icon-upload2' :disabled="isDisabled">
                    上传模版</el-button>
                <span slot="tip" style='margin-left:12px;color:rgb(155, 155, 155)'
                    class='el-icon-warning-outline'>最多上传{{maxNum}}个，文件大小不超过1M，格式为.xlsx、.xls</span>
            </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" style='padding:7px 35px' @click="dialogVisible = false">完 成</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {
        printTemplate,
        downloadTemplate,
        deleteTemplate
    } from '@/api/produceController'
    import fileDownload from "js-file-download";
    export default {
        data() {
            return {
                dialogVisible: false,
                fileList: [],
                tableData: [],
                loading: false,
                maxNum: 10
            }
        },
        props: {
            belongModule: {
                type: Number,
                default: 0
            },
            defaultLength: {
                type: Number,
                default: 0
            }
        },
        computed: {
            computedToken() {
                return {
                    Authorization: localStorage.getItem('token')
                }
            },
            isDisabled() {
                return this.tableData.length >= this.maxNum + this.defaultLength
            }
        },
        methods: {
            initMould(){
                this.dialogVisible = true
                this.getPrintTemplate({
                    belongModule: this.belongModule
                })
            },
            //下载模板
            downloadTemplateFn: async function (data) {
                const res = await downloadTemplate(data)
                let targetName = name.split('.')[0]
                this.utils.showMsg('开始下载', 'success')
                fileDownload(res, targetName + new Date().dateFormat('yyyyMMddhhmmss'),
                    'application/vnd.ms-excel;charset=UTF-8')
            },
            //上传成功
            handleSuccess(){
                this.utils.showMsg('上传成功', 'success')
            },
            //处理错误
            handleError(){
                this.utils.showMsg('上传文件失败,请重新上传', 'error')
            },
            //打印模板列表
            getPrintTemplate: async function (data) {
                this.loading = true
                const res = await printTemplate(data)
                this.tableData = res.data.records
                this.loading = false
            },
            //删除
            deleteTemplateFn: async function (data) {
                await deleteTemplate(data)
                this.getPrintTemplate({
                    belongModule: this.belongModule
                }).then(() => {
                    this.utils.showMsg('删除成功', 'success')
                })
            },
            handleClose(){
                this.fileList = []
            }
        }
    }
</script>

<style lang="less" scoped>
    ::v-deep .el-dialog__body {
        padding: 10px 30px 10px 30px;

        th.el-table__cell.gutter {
            background-color: #fafafa;
        }

        .tableData {
            .l_mould {
                float: left;

                span:last-child {
                    margin-left: 8px;
                    color: rgb(153, 153, 153);
                    border: 1px solid rgb(204, 204, 204);
                    border-radius: 2px;
                    padding: 1px 3px
                }
            }

            .r_mould {
                float: right;
            }
        }
    }

    ::v-deep .el-dialog__footer {
        text-align: center;
    }
</style>